import React from 'react';
import { useCollapse } from '@/hooks';
import { Collapse } from '@/molecules';
import { Form } from 'antd';
import { BottomAction, GuideRecord, GuideHRContent } from '../containers';
import styles from './GuideRecord.less';

const { Panel } = Collapse;

function GuideHR(props) {
    const { form, data = {} } = props;

    const params = React.useMemo(() => {
        const { guideTime, resourceRelation = {}, recordsUrl, ...values } = form.getFieldsValue();
        const { uploadResourceFile } = resourceRelation;
        return {
            guide: {
                guideTime: guideTime?.format('YYYY-MM-DD HH:mm:00'),
                recordsUrl: recordsUrl?.recordUrl,
                resourceRelation: uploadResourceFile ? [uploadResourceFile] : [],
                ...values
            }
        };
    }, [form]);

    const { activeKey, onChange, openAll } = useCollapse(['1', '2'], []);

    return (
        <div className={styles.guideRecord}>
            <Collapse bordered={false} activeKey={activeKey} onChange={onChange}>
                <Panel header="引导内容" key="1">
                    <GuideHRContent />
                </Panel>
                <Panel header="引导记录" key="2">
                    <div style={{ width: 800 }}>
                        <GuideRecord form={form} />
                    </div>
                </Panel>
            </Collapse>
            <BottomAction openAll={openAll} data={data} params={params} form={form} />
        </div>
    );
}

export default Form.create({})(GuideHR);
